@extends("admin.framework.layouts.main")
@push('styles')
    <style>
        .Va-container-content {
            height: 72vw;
        }
    </style>
@endpush
@section("content")
    <div class="form-container">
        <div class="form-container-header  tables-search-fixed-top">
            <el-form :inline="true" :model="tables.search" size="small">
                <el-form-item>
                    <el-input v-model="tables.search.keyword" placeholder="登录用户关键词搜索" clearable></el-input>
                </el-form-item>

                <el-form-item>
                    <el-date-picker
                            v-model="tables.search.date"
                            type="date"
                            :clearable="false"
                            range-separator="至"
                            placeholder="选择登录日期"
                            value-format="yyyy-MM-dd"
                            format="yyyy-MM-dd"
                    >
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="tables.search.status" placeholder="-- 按用户登录状态搜索 --" clearable>
                        <el-option label="登录状态(全部)" value=""></el-option>
                        <el-option key="1" label="登录成功" value="1"></el-option>
                        <el-option key="2" label="登录失败" value="2"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" size="small" @click="tablesSearchEvent"><i class="fa fa-search"></i> 搜 索
                    </el-button>
                    <el-button size="small" @click="tablesResetsEvent"><i class="fa fa-refresh"></i> 重 置</el-button>
                </el-form-item>
                <el-row class="options-right">
                    <el-button size="small" type="danger" @click="clearLoginLog" v-if="permissions.clear">
                        <i :class="permissions.clear.icon"></i> @{{permissions.clear.name}}
                    </el-button>
                </el-row>
            </el-form>

        </div>
        <div class="form-container-main inline-tables no-pic el-table-scroll" v-loading="tables.options.loading">
            <el-table
                    :data="tables.data"
                    border
                    :stripe="true"
                    @selection-change="tablesSelectChange"
                    @sort-change="tablesPaginationSortChange"
                    @cell-click="tablesCellMoveEvent"
                    tooltip-effect="dark"
                    ref="formContainerTables"
                    row-key="id">
                <el-table-column prop="account" label="登录用户" align="center" min-width="100"></el-table-column>
                <el-table-column prop="ip" label="登录IP" align="center" min-width="100"></el-table-column>
                <el-table-column prop="region" label="登录地区" align="center" min-width="100"></el-table-column>
                <el-table-column prop="browser" label="登录浏览器" align="center" min-width="100"></el-table-column>
                <el-table-column prop="msg" label="登录信息" align="center" min-width="100"></el-table-column>
                <el-table-column prop="status" label="登录状态" align="center" min-width="100">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.code == 200" size="mini" type="success" effect="plain">登录成功</el-tag>
                        <el-tag v-else size="mini" type="danger" effect="plain">登录失败</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="created_at" label="登录时间" align="center" :formatter="formatTableDate" min-width="150"
                                 sortable></el-table-column>
            </el-table>
            {!! \App\Master\Framework\View\AdminUi::pagination() !!}
        </div>
    </div>
@endsection
{{--  扩展页面  --}}
@section("page")

@endsection
@push('scripts')
    <script>
        var $App = new Vue({
            el: '#app',
            mixins: [$Config, $Layouts, $Tables],
            data: {
                component:{status:false},
                config:{permissions:true},
                tables: {
                    url: 'framework/manage/log/login', search: {keyword: '', role_id: '', date: '', status: ''}, pagination:{layout:''},
                    prop: 'id', orderBy: 'desc'
                }
            },

            methods: {
                tablesResetsEvent() {
                    var that = this;
                    that.tables.search = {keyword: '', status: '', date: ''};
                    that.tablesGetTableList();
                },

                clearLoginLog() {
                    var that = this;
                    that.$Confirm('确认清空所有登录日志吗？', function () {
                        $Request.postJson('framework/manage/log/login/clear', {}, function (res) {
                            that.$Message('登录日志清空成功！');
                            that.tablesGetTableList();
                        })
                    });
                }
            },

            mounted() {

            },

            beforeCreate() {

            },

            created() {

            }

        })
    </script>
@endpush
